<template>
  <div>
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 注册
    </div>
    <div class="remider">
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <p>请设置登录密码</p>
    </div>
    <div class="ipt">

      <van-field
        v-model="password"
        :type="type"
        placeholder="请设置至少6位登录密码"
        class="password"
        @input="verPassword"
        :right-icon="typeIcon"
        @click-right-icon="changeIcon(typeIcon)"
      />
      <p class="pwdTip">密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字</p>
    </div>
    <van-button
      @click="regSave"
      class="btn"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      :disabled="disable"
    >
      完成
    </van-button>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "Reg",
  data() {
    return {
      password: '',
      disable: '',
      typeIcon: 'closed-eye',
      type:'password'
    };
  },
  created() {
    console.log(this.$route.query.tel);
    
    this.tel=this.$route.query.tel
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    changeIcon(value) {
      if (value == 'closed-eye') {
        this.type = "text";
        this.typeIcon="eye-o"
      } else {
        this.type = "password";
        this.typeIcon="closed-eye"
      }
    },
    // 注册
    regSave() {
      this.$service.post('api/user/dofinishregister', {
        tel: this.tel,
        password: this.password
      }).then((res) => {
        console.log('res',res.data);
        
        if (res.data.code == '200') {
          Toast('注册成功')
        this.$router.push('/Login')
        } else {
         Toast('注册失败')
      }
     })
    },
    verPassword() {
      let reg=/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/
      if (reg.test(this.password.trim())) {
        this.disable=false
      } else {
        this.disable=true
      }
    }
  },
};
</script>

<style scoped>
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.ipt {
  width: 20rem;
  /* height: 6rem; */
  margin: 2rem auto;
}
.btn {
  margin: 0 auto;
  width: 80%;
  display: block;
  border-radius: 5rem;
}
.goreg {
  text-align: right;
  margin: 1rem;
  font-size: 0.7rem;
  color: blue;
}
.goreg:active {
  color: rgb(255, 77, 0);
}
.remider {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
}
.getCodebtn {
  background-color: pink;
  color: red;
  border: 0;
  border-radius: 3rem;
}
.pwdTip{
  margin-top: .5rem;
  font-size: 12px;
}
</style>